<template>
  <div class="trainNode" ref="nd" :class="nodeColorChoose" @click="changeTrain">
      <span style="width: 65px; margin-left: 7px; margin-right: 7px;">{{train}}</span>
      <span :class="dividerColorChoose"><el-divider direction="vertical"></el-divider></span>
      <span style="width: 48px; margin-left: 6px;">{{score}}分</span>
  </div>
</template>

<script>
import {mapState} from "vuex";
import axios from "axios";

export default {
  name: "TrainNode",
  props: {
    score: Number,
    train: String,
    trainId: Number
  },
  data() {
    return {
      healthLevel: 0
    }
  },
  methods: {
    generateHealthLevel() {
      if (60 <= this.score && this.score <80) {
        this.healthLevel = 1;
      } else if (80 <= this.score) {
        this.healthLevel = 2;
      }
    },
    changeTrainSyncPart() {
      // this.$store.commit('changeTrain', this.trainId);
      // this.$store.dispatch('changeTrain', this.trainId);

      let greenLast = document.querySelector('.greenCurrent');
      let yellowLast = document.querySelector('.greenCurrent');
      let redLast = document.querySelector('.greenCurrent');
      if (greenLast !== null) {
        greenLast.classList.remove('greenCurrent');
      }
      if (greenLast !== null) {
        yellowLast.classList.remove('yellowCurrent');
      }
      if (greenLast !== null) {
        redLast.classList.remove('redCurrent');
      }

      let classList = this.$refs.nd.classList;
      if (classList.toString().split(' ')[1] === 'green') {
        classList.add('greenCurrent');
      } else if (classList.toString().split(' ')[1] === 'yellow') {
        classList.add('yellowCurrent');
      } else if (classList.toString().split(' ')[1] === 'red') {
        classList.add('redCurrent');
      }
      this.$refs.nd.classList.add('greenCurrent');
    },
    changeTrain() {
      // let that = this;
      // axios.get('/healthManage/trainScore')
      //     .then(res => {
      //       that.$store.commit('changeTrainScore', res.data.result);
      //       that.$store.commit('changeTrain', that.trainId);
      //       that.changeTrainSyncPart();
      //     }).catch(err => {
      //   console.log(err);
      // });

      this.$store.dispatch('healthManage_trainScore/changeTrain', this.trainId).then(this.changeTrainSyncPart);
    }
  },
  mounted() {
    this.generateHealthLevel();
  },
  computed: {
    ...mapState({
      trainNameSelected: state => state.healthManage_trainScore.trainNameSelected
    }),
    nodeColorChoose: function() {
      return {
        green: this.healthLevel === 2,
        yellow: this.healthLevel === 1,
        red: this.healthLevel === 0
      }
    },
    dividerColorChoose: function () {
      return {
        greenDivider: this.healthLevel === 2,
        yellowDivider: this.healthLevel === 1,
        redDivider: this.healthLevel === 0,
      }
    }
  },
  watch: {
    score: function () {
      this.generateHealthLevel();
    }
  }
}
</script>

<style>
/*分割线颜色*/
.greenDivider>.el-divider {
  background-color: #166009;
}
.yellowDivider>.el-divider {
  background-color: #7C5324;
}
.redDivider>.el-divider {
  background-color: #80212F;
}
</style>

<style scoped>
/*节点样式*/
.trainNode {
  float: left;
  width: 110px;
  height: 32px;
  color: #aaaaaa;
  font-size: 14px;
  line-height: 28px;
  margin-top: 24px;
  margin-left: 16px;
  border-radius: 2px;
}
.trainNode:hover {
  cursor: pointer;
}
.trainNode .el-divider--vertical{
  height: 16px;
  margin: auto 0;
}

/*节点颜色*/
.green {
  background-color: #14292C;
  border: 2px solid #166009;
}
.yellow {
  background-color: #2B2727;
  border: 2px solid #7C5324;
}
.red {
  background-color: #291A2C;
  border: 2px solid #80212F;
}

.greenCurrent {
  width: 110px;
  height: 32px;
  color: #fff;
  line-height: 32px;
  padding-left: 2px;
  background-color: #1BB934;
  border: 2px transparent;
}
.yellowCurrent {
  width: 110px;
  height: 32px;
  color: #fff;
  line-height: 32px;
  padding-left: 2px;
  background-color: #F7981C;
  border: 2px transparent;
}
.redCurrent {
  width: 110px;
  height: 32px;
  color: #fff;
  line-height: 32px;
  padding-left: 2px;
  background-color: #EB2B33;
  border: 2px transparent;
}
</style>
